<script setup>
import {ref} from "vue";
import {add_Carousel} from "@/api/carousel";
import {ElMessage} from "element-plus";

const form = ref({
  name: '',
  imageUrl: ''
})
const handleChange = (response, file, fileList) => {
  form.value.imageUrl = response.data.fileUrl;
  // console.log(res.data)
}

const handleUpload = async () => {

}
const uploadCarouse = async () => {
  const res = await add_Carousel(form.value)
  if (res.code === 200) {
    ElMessage.success('添加成功')
  }
}
</script>

<template>
  <div>
    <el-form>
      <el-form-item label="选择轮播图">
        <el-upload
            :auto-upload="true"
            action="/api/file/upload"
            accept=".png,.jpg"
            :on-success="handleChange"
            :limit="1"
            :show-file-list="true"
            ref="uploadForm"
        >
          <el-image v-if="form.imageUrl" :src="form.imageUrl" class="avatar">
          </el-image>
          <el-icon v-else class="avatar-uploader-icon">
            <Plus/>
          </el-icon>
        </el-upload>
      </el-form-item>

      <el-form-item label="上传">
        <el-button type="primary" @click="uploadCarouse">
          上传轮播图
        </el-button>
      </el-form-item>
    </el-form>
  </div>

</template>

<style scoped>

</style>
